<template>
  <div class="my-add" id="myAdd">
    <h4 class="my-add-hd" @mousedown="moveA">
      新建歌单
      <span class="close" @click="closeAdd">
        <i class="iconfont">&#xec47;</i>
        关闭
      </span>
    </h4>
    <div class="my-add-bd">
      <div class="my-add-content">
        歌单名：
        <el-input placeholder="请输入歌单名" v-model="input"> </el-input>
      </div>
      <div class="my-add-tip">可通过“收藏”将音乐添加到新歌单中</div>
      <div class="my-add-btn">
        <el-button type="primary" size="small" @click="createNew"
          >新建</el-button
        >
        <el-button size="small" @click="closeAdd">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    // 自定义指令： 实现拖动，使用方法：v-drag这里没用到
    drag(el, bindings) {
      el.onmousedown = function (e) {
        console.log(el.target);
        var disx = e.pageX - el.offsetLeft;
        var disy = e.pageY - el.offsetTop;
        document.onmousemove = function (e) {
          el.style.left = e.pageX - disx + "px";
          el.style.top = e.pageY - disy + "px";
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
        };
      };
    },
  },
  props: {
    isMy: {
      type: Boolean,
      default() {
        return false;
      },
    },
    tracks: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      input: "",
    };
  },
  mounted() {
    this.setTop();
  },
  methods: {
    collectSong(pid) {
      this.axios({
        url: "/playlist/tracks?op=add&pid=" + pid + "&tracks=" + this.tracks,
      })
        .then((res) => {
          console.log(res);
          console.log("收藏歌曲成功");
          this.$store.commit("changeShowCollect", false);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    createNew() {
      this.axios({
        url:
          "/playlist/create?name=" + this.input + "&timerstamp=" + Date.now(),
      })
        .then((res) => {
          this.$emit("closeAdd");
          if (this.$route.path.slice(0, 3) == "/my") {
            this.$emit("updateP");
            this.playMyPlaylist(res.data.id);
          }
          if (this.tracks != 0) {
            this.collectSong(res.data.id);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    closeAdd() {
      this.$emit("closeAdd");
      this.$store.commit("changeShowCollect", false);
    },
    setTop() {
      // topH 卷上去的高度
      let topH =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      // documentHeight 为可视窗口的高度
      let documentHeight = document.documentElement.clientHeight;
      this.h = Math.floor(topH + documentHeight / 2);
      let mcm = document.querySelector(".my-add");
      mcm.style.top = this.h - 100 + "px";
    },
    moveA(e) {
      let el = document.getElementById("myAdd");
      e = e || window.event;
      // 鼠标到myAdd的距离
      var disX = e.clientX - el.offsetLeft;
      var disY = e.clientY - el.offsetTop;
      document.onmousemove = function (e) {
        var l = e.clientX - disX;
        var t = e.clientY - disY;
        // console.log(t);
        if (l <= 250) {
          el.style.left = "250px";
        } else if (l + 250 >= document.body.clientWidth) {
          el.style.left =
            document.body.clientWidth - 8 - el.offsetWidth / 2 + "px";
        } else {
          el.style.left = l + "px";
        }
        if (t <= 10) {
          el.style.top = "10px";
        } else if (t + 200 >= document.body.clientHeight) {
          el.style.top = document.body.clientHeight - 200 + "px";
        } else {
          el.style.top = t + "px";
        }
      };
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      };
    },
  },
};
</script>

<style>
.my-add {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 200px;
  width: 500px;
  background-color: var(--color-theme-light-5);
  border-radius: 10px;
  box-shadow: 0 0 10px 3px #999;
  overflow: hidden;
  z-index: 1006;
}
.my-add-hd {
  padding: 0 10px 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  color: #f2f2f2;
  background-color: var(--color-theme);
  cursor: move;
}
.my-add-hd .close {
  position: absolute;
  right: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 0;
  cursor: pointer;
}
.my-add-hd .close .iconfont {
  font-size: 16px;
}
.my-add-bd {
  position: relative;
  width: 100%;
  height: 160px;
  text-align: center;
}
.my-add-bd .my-add-content {
  position: relative;
  width: 100%;
  height: 80px;
  line-height: 80px;
}
.my-add-bd .my-add-content .el-input {
  width: 380px;
}
.my-add-bd .my-add-content input {
  width: 380px;
}
.my-add-bd .my-add-tip {
  font-size: 14px;
  color: #999;
}
.my-add-bd .my-add-btn {
  display: flex;
  height: 60px;
  justify-content: space-evenly;
  align-items: center;
}
</style>